<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入Bootstrap默认样式 -->
    <link rel="stylesheet" type="text/css"
          href="css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript"
            src="js/jquery.serializejson.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>

    <style type="text/css">
        .red {
            background-color: lightgreen;
        }

        .green {
            background-color: darksalmon;
        }
    </style>
</head>
<body style="margin: 0px;background-repeat:no-repeat;
            background-attachment: fixed;
            background-origin: border-box;
            background-size:cover;
		">
<div id="admission" style="margin-top:-12px;">
    <ol class="breadcrumb" ></ol>
    <div>
        <form>
            &emsp;<span class="top" >材料名称:</span>&emsp;&emsp;<input v-model="example.materialName" class="content top"
                                                                       type="text"/>
            <span class="top" >材料编号:</span>&emsp;<input v-model="example.materialModel" class="content top" type="text"/>
            <span class="top" >材料阶段:</span>&emsp;<input v-model="example.materialBak1" class="content top" type="text"/>
            <span class="top" >材料类别:</span>&emsp;<input v-model="example.materialBak2" class="content top" type="text"/>
            <input v-on:click="select" class="top" type="button" value="查询"/>
        </form>
    </div>
    <div>
        <table class="table table-hover">
            <tr>
                <td>编号</td>
                <td>材料Id</td>
                <td>材料名称</td>
                <td>材料型号</td>
                <td>材料价格</td>
                <td>图片地址</td>
                <td>供应商联系方式</td>
                <td>供应商</td>
                <td>阶段</td>
                <td>操作</td>
            </tr>
            <tr v-for="(li,index) in list" >
                <td v-text="index+1"></td>
                <td v-text="li.materialId" id="hh"></td>
                <td v-text="li.materialName"></td>
                <td v-text="li.materialModel"></td>
                <td v-text="li.materialPrice"></td>
                <td >
                    <img style="height: 30px;width: 30px" :src="li.materialImgUrl">
                </td>
                <td v-text="li.materialSupplierTel"></td>
                <td v-text="li.materialSupplier"></td>
                <td v-if="li.materialBak1==1">一阶段</td>
                <td v-if="li.materialBak1==2">二阶段</td>
                <td v-if="li.materialBak1==3">三阶段</td>
                <td v-if="li.materialBak1==4">四阶段</td>
                <td v-if="li.materialBak1==5">五阶段</td>
                <td>
                    <input type="button" class="btn btn-primary" style="background-color:mediumspringgreen" data-toggle="modal" data-target="#login-modal"
                           @click="select2(li)" value="修改材料"/>
                    <input type="button"     class="btn btn-primary" style="background-color:darksalmon" data-toggle="modal " data-target="#myModal"
                           @click="del(li.materialId)" value="下架"/>
                </td>
            </tr>
        </table>
    </div>
<!-----------------------------------材料修改模态框开始---------------------------------------------------------->
    <div v-if="user!=null" class="modal" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <!--头部-->
                <div class="modal-header">
                    <!--<div style="height: 87px;">-->
                    <h3 class="col-md-4" style="line-height: 87px;">材料信息修改</h3>
                    <button class="close col-md-1 col-md-offset-7 text-right" data-dismiss="modal"
                            style="line-height: 20px; ">×
                    </button>
                    <!--</div>-->
                </div>

                <!--主体部分-->
                <div class="modal-body">
                    <form class="form-horizontal" action="get">
                        <!--用户名-->
                        <div class="form-group">
                            <label  class="col-md-2 control-label">材料id</label>
                            <div class="col-md-10">
                                <span v-text="userinfo.materialId"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-md-2 control-label">材料名称</label>
                            <div class="col-md-10">
                                <input class="top" type="text" v-model="userinfo.materialName" placeholder="请输入材料名称"><br/>
                            </div>
                        </div>

                        <!--密码-->
                        <div class="form-group">
                            <label  class="col-md-2 control-label">材料型号</label>
                            <div class="col-md-10">
                                <input class="top" type="text" v-model="userinfo.materialModel"><br/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-md-2 control-label">材料价格</label>
                            <div class="col-md-10">
                                <input class="top" type="text" v-model="userinfo.materialPrice"><br/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-md-2 control-label">图片地址</label>
                            <div class="col-md-10">
                               <img style="height: 30px;width: 30px" :src="userinfo.materialImgUrl">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">商家电话号码</label>
                            <div class="col-md-10">
                                <input class="top" type="text" v-model="userinfo.materialSupplierTel"><br/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-md-2 control-label">商家</label>
                            <div class="col-md-10">
                                <input class="top" type="text" v-model="userinfo.materialSupplier" min="0"><br/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-md-2 control-label">阶段</label>
                            <div class="col-md-10">
                                <input class="top" type="text" v-model="userinfo.materialBak1" min="0"><br/>
                            </div>
                        </div>
                        <!--登录按钮-->
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="button" class="btn btn-default" v-on:click="admission">确定修改</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
    <div>
<!-----------------------------------材料修改模态框结束---------------------------------------------------------->


    </div>
</div>
    <script type="text/javascript">

        var app = new Vue({
            el: '#admission',
            data: {
                list: [],

                example: {
                    materialName: '',
                    materialModel: '',
                    materialBak1:'',
                    materialBak2:'',
                },
                userinfo: {
                    materialId: '',
                    materialName: '',
                    materialModel: '',
                    materialPrice: '',
                    materialImgUrl: '',
                    materialSupplierTel: '',
                    materialSupplier: '',
                    materialBak1:''
                },
                user: null

            },
            created: function () {
                this.select1();
            },
            methods: {
                select1: function () {
                    var _this = this;
                    $.ajax({
                        type: "get",
                        url: "/onedecmaterials/selectNameandModl",
                        data: _this.userinfo,
                        dataType: 'json',
                        success: function (data) {
                            _this.list = data.data;
                            console.log("进来了");
                            console.log(data)
                            console.log(data.data);
                        },
                        error: function (data) {
                            alert(data.message);
                        }
                    });
                },

                select: function () {
                    var _this = this;
                    $.ajax({
                        type: "get",
                        url: "/onedecmaterials/selectNameandModl",
                        data: _this.example,
                        dataType: 'json',
                        success: function (data) {
                            _this.list = data.data;
                           if(data.msg==404){
                               alert(data.code);
                           }
                        },
                        error: function (data) {
                            alert(data.message);
                        }
                    });
                },
                select2: function (li) {
                    this.user = li;
                    this.userinfo.materialId = li.materialId;
                    this.userinfo.materialName = li.materialName;
                    this.userinfo.materialModel = li.materialModel;
                    this.userinfo.materialPrice = li.materialPrice;
                    this.userinfo.materialImgUrl = li.materialImgUrl;
                    this.userinfo.materialSupplierTel = li.materialSupplierTel;
                    this.userinfo.materialSupplier = li.materialSupplier;
                    this.userinfo.materialBak1 = li.materialBak1;

                },
                admission: function () {
                    var _this = this;
                    $.ajax({
                        type: "post",
                        url: "/onedecmaterials/updateMaterials",
                        data: _this.userinfo,
                        dataType: 'json',
                        success: function (data) {
                            if(data.code==200){
                                alert("修改成功");
                                history.go(0);
                            }else{
                                alert("修改失败");
                            }
                        },
                        error: function (data) {
                            alert(data.message);
                        }
                    });
                },
                del:function (materialId) {
                    console.log(materialId);
                    var id=materialId;
                    if(confirm("确定下架？")){
                        $.ajax({
                            type: "get",
                            url: "/onedecmaterials/deteleId",
                            data: {materialId:id},
                            dataType: "json",
                            success:function (data) {
                                if (data.code==200){
                                    alert("下架成功");
                                    history.go(0);
                                }
                            }
                        })
                    }
                }
            }
        });
    </script>
</body>
</html>
